<!--
 * @Author: Jackie
 * @Date: 2021-01-03 12:11:32
 * @LastEditors: Jackie
 * @LastEditTime: 2021-01-07 22:14:18
 * @Description: 竞评-组件
 * @FilePath: \temp-project\src\components\Evaluate.vue
-->
<template>
<div class='evaluate'>
    <div class="evaluateHeader">
        <div class="evaluateBtn">
        <button >第I类</button>
        <button >第II类</button>
        </div>
        <div class="evaluateTitle">科技项目争先创优竞评</div>
    </div>
    <div class="evaluateTab">
        <table>
                <tr>
                    <th></th>
                    <th>5月</th>
                    <th>6月</th>
                    <th>7月</th>
                </tr>
                <tr v-for='(item,index) in evaluateInfo' :key="index" class="evaluateTabIcon">
                  <td>
                    <div class="td1-1">{{item['num']}}</div>
                    <div class="td1-2"></div>
                    <div class="td1-text">{{item['title']}}</div>
                  </td>
                  <td>
                    <div class="tdface">
                      <div class="faceIcon">
                        <icon-base v-show="item['5月']=='优+'?true:false" icon-name="excellent" width="28.5" height="28.5" viewBox="0 0 28.5 28.5" 
                        :class="item['5月']=='优+'?'faceInons':''"
                        ><icon-excellent /></icon-base>
                        <icon-base v-show="item['5月']=='良'?true:false" icon-name="good" width="28.5" height="28.5" viewBox="0 0 28.5 28.5" 
                        :class="item['5月']=='良'?'faceInons':''"
                        ><icon-good /></icon-base>
                        <icon-base v-show="item['5月']=='中'?true:false" icon-name="avg" width="28.5" height="28.5" viewBox="0 0 28.5 28.5" 
                        :class="item['5月']=='中'?'faceInons':''"
                        ><icon-avg /></icon-base>
                      </div>
                      <div>{{item['5月']}}</div>
                    </div>
                  </td>
                  <td>
                    <div class="tdface">
                      <div class="faceIcon">
                        <icon-base v-show="item['6月']=='优+'?true:false" icon-name="excellent" width="28.5" height="28.5" viewBox="0 0 28.5 28.5"  
                        :class="item['5月']=='优+'?'faceInons':''"
                        ><icon-excellent /></icon-base>
                        <icon-base v-show="item['6月']=='良'?true:false" icon-name="good"  width="28.5" height="28.5" viewBox="0 0 28.5 28.5" 
                        :class="item['5月']=='良'?'faceInons':''"
                        ><icon-good /></icon-base>
                        <icon-base v-show="item['6月']=='中'?true:false" icon-name="avg" width="28.5" height="28.5" viewBox="0 0 28.5 28.5" 
                        :class="item['5月']=='中'?'faceInons':''"
                        ><icon-avg /></icon-base>
                      </div>
                      <div>{{item['6月']}}</div>
                    </div>
                  </td>
                  <td>
                    <div class="tdface">
                      <div class="faceIcon">
                        <icon-base v-show="item['7月']=='优+'?true:false" icon-name="excellent" width="28.5" height="28.5" viewBox="0 0 28.5 28.5"  
                        :class="item['5月']=='优+'?'faceInons':''"
                        ><icon-excellent /></icon-base>
                        <icon-base v-show="item['7月']=='良'?true:false" icon-name="good"  width="28.5" height="28.5" viewBox="0 0 28.5 28.5" 
                       :class="item['5月']=='良'?'faceInons':''"
                        ><icon-good /></icon-base>
                        <icon-base v-show="item['7月']=='中'?true:false" icon-name="avg"  width="28.5" height="28.5" viewBox="0 0 28.5 28.5" 
                        :class="item['5月']=='中'?'faceInons':''"
                        ><icon-avg /></icon-base>
                      </div>
                      <div>{{item['7月']}}</div>
                    </div>
                  </td>
                </tr>
        </table>
    </div>
</div>
</template>

<script>
import IconExcellent from "./Icon/Icons/ExcellentIcon"
import IconGood from "./Icon/Icons/GoodIcon"
import IconAvg from "./Icon/Icons/AvgIcon"
import IconBase from "./Icon/Icons/IconBase.vue"
export default {
components: {IconBase,IconExcellent,IconGood,IconAvg},
data(){
    return{
      evaluateList: ['','5月','6月','7月'],
      evaluateInfo:[
        {'':1,'num':'No.1','title':'兰溪电厂燃煤电厂燃料全流程控制','5月':'优+','6月':'优+','7月':'优+'},
        {'':2,'num':'No.2','title':'天然气工程上下游一体化建设','5月':'良','6月':'良','7月':'良'},
        {'':3,'num':'No.3','title':'智慧新能源','5月':'中','6月':'中','7月':'中'},
        {'':4,'num':'No.4','title':'新天公司1200立方米煤化工废水臭氧','5月':'优+','6月':'优+','7月':'优+'},
      ],   
    }
  },
mounted(){
    this.evaluateTabIcon()   
    window.addEventListener("resize", () => this.svgResize());
  },
methods:{
    evaluateTabIcon(){
      let _this = this; 
      const evaluateTabIcon=document.querySelectorAll('.evaluateTabIcon')
      evaluateTabIcon.forEach((item,index)=>{
        const num=_this.evaluateInfo[index]['']
        
        //修改num样式
        let color1='',color2='',color3=''
 
        if(num=='1'){color1='#609D07';color2='#8DE400' ;color3='#D8800E'}
        if(num=='2'){color1='#25979D';color2='#00E0E4' ;color3='#B9D848'}
        if(num=='3'){color1='#9D9506';color2='#E4D600' ;color3='#D8490C'}
        if(num=='4'){color1='#9D3F93';color2='#E418D4' ;color3='#718AD8'}
      
        const td1_1=item.children[0].children[0]
        td1_1.style.cssText=`
        background:linear-gradient(-45deg,${color1} 0%,${color2} 100%); 
        background: -webkit-linear-gradient(-45deg, ${color1} 0%, ${color2} 100%); 
        background: -o-linear-gradient(-45deg, ${color1} 0%, ${color2} 100%); 
        background: -moz-linear-gradient(-45deg, ${color1} 0%, ${color2} 100%);
        `
        const td1_2=item.children[0].children[1]
        td1_2.style.cssText=`
        background:linear-gradient(to right,${color2} 0%,${color3} 100%); 
        background: linear-gradient(to left,${color2} 0%,${color3} 100%); 
        background: linear-gradient(to right,${color2} 0%,${color3} 100%); 
        background: linear-gradient(to right,${color2} 0%,${color3} 100%);  
        `
      })
    },
    svgResize(){
      const tmp=document.querySelector(".faceIcon");
      const w=tmp.clientWidth;
      const h=tmp.clientHeight;
      console.log(w,h);
      const iconbase=document.querySelectorAll(".faceInons");
      iconbase.forEach(item=>{
        item.style.cssText=`width:${w}; height:${h};`
      })
    }
  },

}
</script>

<style lang="less" scoped>
//竞评
.evaluate{
width: 12.175rem;//974px;
height: 4.6125rem;//369px;
border-radius: .125rem;//10px;
background-color: var(--bgc--);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
//竞评头部
.evaluateHeader{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width:11.25rem;//900px;
height: .875rem;//70px;
border-bottom: 2px solid black;
position: relative;
    //竞评按钮
    .evaluateBtn{
        position: absolute;
        text-align: start;
        left: 0;
        bottom:10%;
        > button{
        padding-right: .375rem;//30px
        font-family: "NotoSansHans-Light";
        font-size: .225rem;//18px;
        font-weight: 300;
        background-color: var(--bgc--);
        border: none;
        color: #fff;
        }
    }
    //竞评标题
    .evaluateTitle{
        font-size: .4rem;//32px;
        font-family: "NotoSansHans-Light";
        font-weight: 300;
        color: var(--textColor--);
    } 
}
//竞评表格
.evaluateTab{
    width: 11.25rem;//900px;
    height:3.375rem;//270px
    padding-top: .125rem;//10px
    padding-bottom: .25rem;//20px
    table {
        width: 100%; 
        height: 100%;
        text-align: start;
        th{//table标题
        text-align: start;
        color: #fff;
        font-size: .225rem;//18px;
        font-family: "NotoSansHans-Light";
        font-weight: 300;
        }
        td{
          padding-right: .4375rem;
        }
        td:first-child{//第一列
        width:7.125rem;//570.1px;
        height: .46625rem;//37.3px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-end;
        position: relative;    
        .td1-1{
          width:.875rem;//70px;
          height:.4625rem;//37.3px
          font-family: 'Myriad pro';
          font-size:.275rem;//22px; 
          color:#fff; 
          border-top-left-radius:5px;
          border-bottom-left-radius:5px;
          border-top-right-radius:5px;
          text-align: center;
          line-height: .4625rem;//37.3px
          // background-color: pink;
        }
        .td1-2{
          width:6.25rem;//500px
          height:5px;
          border-bottom-right-radius:2px;
          border-top-right-radius:2px;
          // background-color: pink;
        }
        .td1-text{
          font-size:.2625rem; //21px
          color:#fff; 
          line-height: .4625rem;//37.3px
          position: absolute;
          left:15%;
          bottom:10%;
          }
        }
        .tdface{
            width: .75rem;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            font-size: .1875rem;
            font-family: "NotoSansHans-Light";
            font-weight: 300;
          .faceIcon{
            width: .35625rem;
            height: .35625rem;
            margin-right:.0625rem;
            }
          }
    }
}

}
</style>
